<template>
  <el-dialog
    title="选择门店名称"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="80%"
    @close="closeDialog"
  >
    <div class="person_content">
      <div class="group">
        <div class="mailList">
          <h3>门店视图</h3>
          <div class="group_con">
            <div v-loading="loading" class="staff_con">
              <el-tree
                :props="props"
                :load="loadNode"
                lazy
                accordion
                :expand-on-click-node="false"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ node.label }}</span>
                  <span>
                    <el-button
                      type="text"
                      size="mini"
                      @click="() => append(node, data)">
                      <i class="el-icon-circle-plus" style="font-size: 18px;"></i>
                    </el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </div>
        </div>
      </div>
      <div class="personnel">
        <h3>已选信息</h3>
        <div class="person_box">
          <el-tag
            v-for="(tag, index) in upperStory"
            :key="index"
            closable
            @close="handleClose(index)"
          >
            <el-tooltip class="item" effect="dark" placement="bottom">
              <div slot="content">
                城市编号：{{ tag.cityCode }}<br /><br />
                城市名称：{{ tag.cityName }}<br /><br />
                ssCode：{{ tag.ssCode }}<br /><br />
                名称：{{ tag.ssName }}
              </div>
              <el-button>{{ tag.ssName }}</el-button>
            </el-tooltip>
          </el-tag>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" size="mini">取消</el-button>
      <el-button type="primary" @click="submit()" size="mini">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      upperStory: [],
      loading: false,
      sendName: "",
      //树结构方法
      props: {
        label: "ssName",
        children: "zones"
      },
      node_had: {},
      resolve_had: ''
    };
  },
  activated() {},
  methods: {
    //点击取消
    closeDialog(){
      this.dialogVisible = false
      if(this.upperStory.length > 0) this.$emit('fetchPersonId', this.upperStory)
    },
    fetchAgainData (storyStaffAccounts) {
      if (storyStaffAccounts) {
        this.$http({
          url: this.$http.adornUrl(`/cpcpstorestafflink/editInfo`),
          method: 'get',
          params: this.$http.adornParams({
            storyStaffAccounts
          })
        }).then(res => {
          if (res.data.code === 0) {
            // console.log('data', res.data.list)
            this.upperStory = res.data.list
            this.$emit('fetchPersonId', this.upperStory)
          }
        })
      }
    },
    // 初始
    init(name, id, menDianTreeData) {
      this.sendName = name;
      this.dialogVisible = true;
      if (!id) this.upperStory = []
      this.node_had.childNodes = []; // 把存起来的node的子节点清空，不然会界面会出现重复树！
      this.loadNode(this.node_had, this.resolve_had); // 再次执行懒加载的方法
    },
    // tree 懒加载
    loadNode(node, resolve) {
      // console.log("加载节点", node.level, node, resolve);
      if (node.level === 0) {
        this.node_had = node;//这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
        this.resolve_had = resolve;//同上，把node.level == 0的resolve也存起来
      }
      let code = node.data ? node.data.ssCode : null;
      this.$http({
        url: this.$http.adornUrl(`cpcpstorestafflink/getChannelTypeByLevel`),
        method: "get",
        params: this.$http.adornParams({
          level: node.level + 1,
          pId: code
        })
      }).then(({ data }) => {
        // console.log(data, "datatree");
        if (data.code === 0) {
          return resolve(data.data);
        }
      })
    },
    // append
    append (node, data) {
      let flag = 0
      this.upperStory.forEach(item => {
        if (item.ssCode === data.ssCode) {
          this.$message.error(`您已选择${data.ssName},请勿重复选择`)
          flag = 1
          return false
        }
      })
      if (flag === 0) {
        this.upperStory.push(data)
      }
    },
    // 删除人员标签
    handleClose(index) {
      this.upperStory.splice(index, 1);
    },
    // 确定
    submit() {
      this.dialogVisible = false;
      if (this.sendName === "渠道视图") {
        this.$emit("fetchPersonId", this.upperStory);
      }
    },
  },
};
</script>

<style scoped>

.el-dialog__body {
  padding: 0 20px;
}
.person_content {
  display: flex;
}
.el-tag {
  height: 30px;
}
.el-tag button {
  background: transparent;
  border: 0;
}
.group {
  width: 60%;
}
.group div {
  width: 100%;
  box-sizing: border-box;
}
.group div h3 {
  width: 100%;
  text-align: center;
}
.staff_con {
  width: 100% !important;
  height: 578px;
  overflow-y: auto;
}
.group_con {
  width: 50%;
  height: 600px;
  padding: 10px;
  border: 1px solid #dedede;
}
.group_con ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.group_con li {
  cursor: pointer;
}
.group_con p:hover {
  background: #3e8ef7;
  color: #fff;
}
.personnel {
  margin: 0 20px;
  width: 40%;
}
.personnel h3 {
  text-align: center;
}
.person_box {
  border: 1px solid #dedede;
  display: inline-block;
  width: 100%;
  height: 600px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px;
}
.person_box > span {
  margin: 2px 6px;
}
.group_li {
  padding: 0 !important;
  line-height: 30px;
  height: 546px;
  overflow-y: scroll;
}
.group_li li {
  padding-left: 40px !important;
}
.group_li li:hover {
  background: #3e8ef7;
  color: #fff;
}
.person_list li {
  line-height: 32px;
  padding-left: 40px;
}
.person_list li:hover {
  background: #3e8ef7;
  color: #fff;
}
.list_con {
  width: 100%;
}
.el-tag .el-button{
  color: #fff !important;
}
</style>